<script setup lang='ts'>
// 自定义 规则
//interface Props {
//}
import AliIcon from '@/components/AliIcon/index.vue'
import { ref, defineEmits, onMounted } from 'vue';
import { useMarkerStore } from '@/store/index'
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll';
//const { } = defineProps<Props>();
const emits = defineEmits(['clickItem', 'close']);
// 
// const searchStore = useSearchStore();
const markerStore = useMarkerStore();
const { mescrollInit, downCallback, getMescroll } = useMescroll();
const upOption = {
    auto: false,
    empty: {
        use: true,
        tip: '--没你找的数据,老铁--'
    },
    textNoMore: '~没有更多了~',
    onScroll: true,
    toTop: {
        bottom: '300rpx',
        zIndex: 999
    },
    noMoreSize: 6
}
/**
 * @property 变量
 */
// const list = ref([]);
const keyword = ref('');
const data = ref<Array<ListItem>>([]);
/**
 * @property  所有请求以api开头 如:apiDataInfo
 */
const apiSearchList = (num: number, size: number): Promise<{
    data: Array<ListItem>,
    all: number
}> => {

    return new Promise((resolve) => {
        const searchList: Array<ListItem> = markerStore.operational.filter(item => item.alias.includes(keyword.value) || item?.name?.includes(keyword.value) || item?.name?.includes(keyword.value) || item?.alias?.includes(keyword.value));
        const list = searchList.slice((num - 1) * size, size * num);
        // console.log(list)
        setTimeout(() => {
            resolve({
                data: list,
                all: searchList.length
            })
        }, 300)


    })
}
/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */

const clickSearch = async () => {
    const res = await apiSearchList(getMescroll().num, getMescroll().size);
    getMescroll().endBySize(res.data?.length || 0, res?.all || 0);
    if (getMescroll().num === 1) data.value = res.data
    else data.value = [...data.value, ...res.data]
}

const upCallback = () => {
    clickSearch();
}
// 触发上拉
const changeInput = () => [
    getMescroll().resetUpScroll(false)
]
// 点击项
const clickItem = async (item: ListItem) => {
    // emits('clickItem', item)
    // searchStore.setItem(item);
    markerStore.updataMarker({
        mid: item.mid + '',
        latitude: Number(item.lat),
        longitude: Number(item.lng),
        alias: item.alias
    });
    emits('clickItem', {
        detail: {
            markerId: item.mid,
            latitude: Number(item.lat),
            longitude: Number(item.lng)
        }
    });
    emits('close')
}
/**
 * @property 内置方法
 */

</script>
<template>
    <div class="w-[100vw] h-[100vh] pl-3 pr-3 bg-[#f5f5f5] pt-2 fixed z-99999999 top-0 flex flex-col"
        style="background: linear-gradient(bottom,  #275EFF 0%, #51B3F5 100%);">
        <up-navbar title="搜索" placeholder @leftClick="emits('close')"></up-navbar>
        <div class="h-72rpx">
            <up-input placeholder="请输入搜索" :border="'none'" clearable v-model="keyword" @confirm="changeInput"
                :customStyle="{
                    background: '#F4FAFFFF',
                    height: '72rpx',
                    paddingLeft: '20rpx',
                    paddingRight: '20rpx',
                }" @change="changeInput">
                <template #suffix>
                    <AliIcon icon-name="icon-sousuoicon" />
                </template>
            </up-input>
        </div>
        <div class="flex-1 overflow-hidden">
            <mescroll-uni @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback" :fixed="false">

                <div class="w-[100%] h-200 flex p-3.5 b-rd-2 bg-[#fff] mt-2" v-for="item in data" :key="item.id"
                    @click="clickItem(item)">
                    <div class="w-144 h-144 b-rd-2 fc bg-[#E8F3FF] c-[#275EFF] font-size-80 font-semibold">
                        {{ item.alias.charAt(0) }}
                    </div>
                    <div class="flex-1 ml-2 flex-col flex">
                        <text class=" font-size-32">{{ item.alias }}</text>
                        <text class=" font-size-24">经度：{{ item.lat }}</text>
                        <text class=" font-size-24">维度：{{ item.lng }}</text>
                        <text class=" font-size-24">老板姓名：{{ item.name }}</text>
                        <text class="font-size-24 c-[#86909c]">{{ item.address }}</text>
                    </div>
                </div>
            </mescroll-uni>
        </div>

    </div>
</template>
<style lang="scss" scoped></style>